<template>
  <div>
    <div style="margin-top: 6px"></div>
    <div style="height: 500px">
      <fs-page>
        <template #header>
          <div class="title">
            《数据字典明细管理》 字典值: {{ modelValue }} 字典名: {{ dictName }}
            <fs-icon icon="arcticons:notification-dictionary" :spin="true" />
          </div>
        </template>
        <fs-crud ref="crudRef" v-bind="crudBinding" />
      </fs-page>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, onMounted, watch } from 'vue';
  import createCrudOptions from './crud';
  import { useExpose, useCrud } from '@fast-crud/fast-crud';
  export default defineComponent({
    name: 'SubTable',
    props: {
      modelValue: {
        type: String,
      },
      dictName: {
        type: String,
      },
    },
    emits: ['update:modelValue'],
    setup(props, ctx) {
      const crudRef = ref();
      const crudBinding = ref();
      const { expose } = useExpose({ crudRef, crudBinding });
      const { crudOptions } = createCrudOptions({ expose, props, ctx });
      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
      const { resetCrudOptions } = useCrud({ expose, crudOptions });

      onMounted(() => {
        expose.doRefresh();
      });

      watch(
        () => {
          return props.modelValue;
        },
        (value) => {
          console.log('modelValue changed', value);
        }
      );
      return {
        crudBinding,
        crudRef,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.fs-crud-container.compact .el-table--border) {
    border-left: 1px solid #eee;
  }
</style>
